<template>
	<div :id="prop.domId" style="width: 100%; height: 100%"></div>
</template>

<script lang="ts" setup>
import { nextTick } from 'vue'
import * as echarts from 'echarts'
const prop = defineProps({
	name: String,
	domId: String,
	data: Array,
	radius: [String, Array],
	showBtn: {
		type: Boolean,
		default: false
	}
})
const emit = defineEmits([
	'pie-chick'
])
type EChartsOption = echarts.EChartsOption
const setData = () => {
	return prop.data || []
}
const setFormatter = () => {
	if(prop.showBtn){
		return '{name|{b}}\n{btn|去审核}\n{time|{c}}'
	}else{
		return '{name|{b}}\n{time|{c}}'
	}
}
nextTick(() => {
	let chartDom: any = document.getElementById(prop.domId as never)
	let myChart = echarts.init(chartDom)
	myChart.on('click', (res: any) => {
		emit('pie-chick',res.dataIndex)
	}); 
	let option: any

	option = {
		tooltip: {
			trigger: 'item'
		},
		series: [
			{
				name: prop.name,
				type: 'pie',
				radius: prop.radius,
				itemStyle: {
					borderColor: '#fff',
					borderWidth: 1
				},
				label: {
					alignTo: 'edge',
					formatter: setFormatter(),
					minMargin: 5,
					edgeDistance: 10,
					lineHeight: 15,
					rich: {
						name: {
							fontSize: 16,
							color: '#333'
						},
						time: {
							lineHeight: 30,
							fontSize: 16,
							color: '#999'
						},
						btn: {
							lineHeight: 30,
							fontSize: 16,
							color: '#409EFF'
						}
					}
				},
				labelLine: {
					length: 15,
					length2: 15,
					maxSurfaceAngle: 0
				},
				data: setData()
			}
		]
	}

	option && myChart.setOption(option)
})
</script>

<style></style>
